<!DOCTYPE html>
<html>
  <head>
    <title>Google Developers</title>
    <link rel="stylesheet" type="text/css" href="/css/screen.css" />
    <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer async></script>
    <script src="http://www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body class="docs framebox_body">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var origins = [
  'Euston',
  'Kings Cross',
  'Liverpool St',
  'Paddington',
  'St. Pancras',
  'Victoria',
  'Waterloo'
];

var destinations = [
  'Buckingham Palace',
  'Houses of Parliament',
  'Tower Bridge',
  'Trafalgar Square',
  'Westminster Abbey'
];

var query = {
  origins: origins,
  destinations: destinations,
  travelMode: google.maps.TravelMode.WALKING,
  unitSystem: google.maps.UnitSystem.IMPERIAL
};

var map, dms;
var dirService, dirRenderer;
var highlightedCell;
var routeQuery;
var bounds;
var panning = false;

function initialize() {
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(51.5, -0.126),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  createTable();

  for (var i = 0; i < origins.length; i++) {
    origins[i] += ' Station, London, UK';
  }

  for (var j = 0; j < destinations.length; j++) {
    destinations[j] += ', London, UK';
  }

  dms = new google.maps.DistanceMatrixService();

  dirService = new google.maps.DirectionsService();
  dirRenderer = new google.maps.DirectionsRenderer({preserveViewport:true});
  dirRenderer.setMap(map);

  google.maps.event.addListener(map, 'idle', function() {
    if (panning) {
      map.fitBounds(bounds);
      panning = false;
    }
  });
  updateMatrix();
}

function updateMatrix() {
  dms.getDistanceMatrix(query, function(response, status) {
    if (status == 'OK') {
      populateTable(response.rows);
    }
  });
}

function createTable() {
  var table = document.getElementById('matrix');
  var tr = addRow(table);
  var t = addElement(tr);
  t.style.borderLeft = 0;
  for (var j = 0; j < destinations.length; j++) {
    var td = addElement(tr);
    td.setAttribute('class', 'destination');
    td.appendChild(document.createTextNode(destinations[j]));
  }

  for (var i = 0; i < origins.length; i++) {
    var tr = addRow(table);
    var td = addElement(tr);
    td.setAttribute('class', 'origin');
    td.appendChild(document.createTextNode(origins[i]));
    for (var j = 0; j < destinations.length; j++) {
      var td = addElement(tr, 'element-' + i + '-' + j);
      td.setAttribute('class', 'distance');
      td.onmouseover = getRouteFunction(i,j);
      td.onclick = getRouteFunction(i,j);
    }
  }
}

function populateTable(rows) {
  for (var i = 0; i < rows.length; i++) {
    for (var j = 0; j < rows[i].elements.length; j++) {
      var distance = rows[i].elements[j].distance.text;
      var duration = rows[i].elements[j].duration.text;
      var td = document.getElementById('element-' + i + '-' + j);
      td.innerHTML = distance + '<br>' + duration;
    }
  }
}

function getRouteFunction(i, j) {
  return function() {
    routeQuery = {
      origin: origins[i],
      destination: destinations[j],
      travelMode: query.travelMode,
      unitSystem: query.unitSystem,
    };
    if (highlightedCell) {
      highlightedCell.style.backgroundColor = '#ffffff';
    }
    highlightedCell = document.getElementById('element-' + i + '-' + j);
    highlightedCell.style.backgroundColor = '#e0ffff';
    showRoute();
  }
}

function showRoute() {
  dirService.route(routeQuery, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      dirRenderer.setDirections(result);
      bounds = new google.maps.LatLngBounds();
      bounds.extend(result.routes[0].overview_path[0]);
      var k = result.routes[0].overview_path.length;
      bounds.extend(result.routes[0].overview_path[k-1]);
      panning = true;
      map.panTo(bounds.getCenter());
    }
  });
}

function updateMode() {
  switch (document.getElementById('mode').value) {
    case 'driving':
      query.travelMode = google.maps.TravelMode.DRIVING;
      break;
    case 'walking':
      query.travelMode = google.maps.TravelMode.WALKING;
      break;
  }
  updateMatrix();
  if (routeQuery) {
    routeQuery.travelMode = query.travelMode;
    showRoute();
  }
}

function updateUnits() {
  switch (document.getElementById('units').value) {
    case 'km':
      query.unitSystem = google.maps.UnitSystem.METRIC;
      break;
    case 'mi':
      query.unitSystem = google.maps.UnitSystem.IMPERIAL;
      break;
  }
  updateMatrix();
}

function addRow(table) {
  var tr = document.createElement('tr');
  table.appendChild(tr);
  return tr;
}

function addElement(tr, id) {
  var td = document.createElement('td');
  if (id) {
    td.setAttribute('id', id);
  }
  tr.appendChild(td);
  return td;
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
body {
  font-size: 16px;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#map {
  height: 376px;
  width: 100%;
}

#matrix {
  font-size: 11pt;
  border: 0 !important;
  width: 100%;
}

#matrix td {
  border-right: 0 !important;
}

#controls {
  position: absolute;
  top: 280px;
  right: 80px;
  text-align: right;
}

.origin,.destination {
  font-weight: bold;
  text-align: center;
  background-color: #e0ffe0;
}

.origin {
  border-left: 0 !important;
  border-right: 1px solid #BBB !important;;
}

td {
  border: 1px solid grey;
  width: 80px !important;
  padding: 2px !important;
  cursor: default;
  background-color: #ffffff;
}

.distance {
    padding-left: 60px !important;
}

#mode,#units {
  font-size: 12pt;
  -webkit-appearance: none;
  padding: 10px;
  width: 120px;
}
</style>
<div id="container">
  <div id="map"></div>
  <div id="controls">
    <select id="mode" onChange="updateMode()">
      <option value="driving">Driving</option>
      <option value="walking" selected="selected">Walking</option>
    </select><br/>
    <select id="units" onChange="updateUnits()">
      <option value="km">Kilometers</option>
      <option value="mi" selected="selected">Miles</option>
    </select>
  </div>
  <table id="matrix"></table>
</div>
</body>
</html>
